<div>
  <!-- 发布 -->
  <div class="search">
    <button type="button" class="btn btn-info release_info">发布资讯</button>
  </div>
  <!-- 表格区 -->
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">标题</th>
        <th scope="col">发布日期</th>
        <th scope="col">所属栏目</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>

  <div id="myPage" class="demo"></div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">资讯管理</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 表单 -->
        <form>
          <div class="form-group">
            <label for="form_title">标题</label>
            <input type="text" class="form-control" id="form_title" >
          </div>
          <div class="form-group">
            <label for="form_category">所属栏目</label>
            <select id="form_category" class="form-control">
              
            </select>
          </div>
          <!-- 文章内容 -->
          <div class="form-group">
            <label for="form_content">内容</label>
            <div id="editor"></div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary savaUpdateHandler">保存</button>
      </div>
    </div>
  </div>
</div>

<style>
  span:hover {
    cursor: pointer;
  }
  .search {
    margin-bottom: 1em;
  }
  button {
    font-size: 12px !important;
  }
  .modal-dialog {
    max-width: 800px;
  }
</style>

<script>
  var id;
  var allData;
  var baseUrl = "http://39.96.21.48:7788"
  var date = new Date()

  // 将token设置到请求头中
  $.ajaxSetup({
    headers: {
      "Authorization":localStorage.getItem("token")
    }
  })

  // 删除
  $("tbody").on("click",".deleteHandler",function() {
    // 获取当前行id
    id = $(this).closest("tr").find("td:first").text()

    // 调用接口
    $.get(baseUrl+"/article/deleteById",{id:id},function(res) {
      // console.log(res)
      // 刷新数据
      queryFindMessage(1)
    })
  })

  //创建编辑器
  var E = window.wangEditor;
  var editor = new E('#editor');
  editor.create();

  // 查询所有栏目
  function findAllCategory() {
    $.get(baseUrl+"/category/findAll",function(res) {
      // console.log(res,'....')
      // 过滤出所有父栏目
      // var parents = res.data.filter(function(item) {
      //   // console.log(item)
      //   return item.parentId == null
      // })
      res.data.forEach(function(item) {
        $(`
        <option value=`+item.id+`>`+item.name+`</option>
        `).appendTo($("#form_category"))
      })
    })
  }
  findAllCategory()

  // 发布资讯
  $(".release_info").on("click",function() {
    // 模态框置空
    $("#form_title").val('')
    $("#form_category").val('')
    $(".w-e-text").html('')
    $("#exampleModal").modal("show")
  })

  // 保存更新
  $(".savaUpdateHandler").on("click",function() {
    // 判断id是否存在
    if(id) {
      // 更新
      // 获取模态框中的值
      var obj = {
        id: id,
        title: $("#form_title").val(),
        content: $(".w-e-text").html(),
        categoryId: $("#form_category").val(),
        publishTime: date.getTime()
      }

    } else {
      // 新增
      var obj = {
        title: $("#form_title").val(),
        content: $(".w-e-text").html(),
        categoryId: $("#form_category").val(),
        publishTime: date.getTime()
      }
    }
    console.log(obj)
    // 调用接口
    $.post(baseUrl+"/article/saveOrUpdate",obj,function(res) {
      // console.log(res)
      // 关闭模态框
      $("#exampleModal").modal("hide")
      queryFindMessage(1)
    })
  })

  // 修改(事件代理)
  $("tbody").on("click",".editHandler",function() {
    // 为修改按钮添加属性
    $(".editHandler").attr("data-toggle","modal")
    $(".editHandler").attr("data-target","#exampleModal")
    // 获取当前行id
    id = $(this).closest("tr").find("td:first").text()
    allData.forEach(function(item) {
      // 如果item.id == id
      if(item.id == id) {
        // 将当前行数据放到模态框中
        // console.log(item)
        $("#form_title").val(item.title)
        $("#form_category").val(item.categoryId)
        $(".w-e-text").html(item.content)
      }
    })    
  })

  // 分页查询
  function queryFindMessage(page) {
    var obj = {
      page:page,
      pageSize:5
    }
    $.get(baseUrl+"/article/pageQuery",obj,function(res) {
      $("tbody").empty()
      // console.log(res)
      allData = res.data.list
      res.data.list.forEach(function(item,index) {
        // console.log(item)
        // 追加表格中
        $(`
          <tr>
            <td>`+item.id+`</td>
            <td>`+item.title+`</td>
            <td>`+moment(item.publishTime).format("YYYY-MM-DD HH:mm:ss")+`</td>
            <td>`+item.category.name+`</td>
            <td>
              <span class="detailsHandler">查看</span>
              <span class="editHandler">编辑</span>
              <span class="deleteHandler">删除</span>
            </td>
          </tr>
        `).appendTo($("tbody"))
      })
      $("#myPage").sPage({
        page:res.data.page,
        pageSize:res.data.pageSize,
        total:res.data.total,
        prevPage:"<<",
        nextPage:">>",
        backFun:function(page){
          queryFindMessage(page)
        }
      });
    })
  }
  queryFindMessage(1)


  
</script>
